<template>
  <div class="phone">
    <p>
      哈苏全焦段大师影像
      <br />
      所拍皆是大作
    </p>
    <div ref="bgRef" class="phone-bg">
      <img ref="imgRef" src="/img/hasu.jpg" alt="" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const bgRef = ref()
const imgRef = ref()
var initialScale = 1 // 初始缩放比例
var scaleFactor = 0.005 // 每滚动1px缩放的比例
var scaleAmount = 0 // 记录缩放量的变量

onMounted(() => {
  scale()
})

// 初始化图片的缩放比例
const scale = () => {
  console.log(imgRef.value)
  //   imgRef.value.style.transform = 'scale(' + initialScale + ')'

  // 当滚动条滚动时触发的事件处理函数
  bgRef.value.addEventListener('mousewheel', function (event) {
    // 计算缩放量
    scaleAmount += this.scrollTop
    if (event.deltaY > 0) {
      //   console.log('向下滚动')
      if (imgRef.value.style.transform < 0.8)
        return (imgRef.value.style.transform = 0.8)
      scaleAmount--
    } else {
      //   console.log('向上滚动')
      if (imgRef.value.style.transform > 1.2)
        return (imgRef.value.style.transform = 1.2)
      scaleAmount++
    }
    var scale = initialScale + scaleAmount * scaleFactor
    console.log(scale, '滚动的scale')
    // 应用缩放效果
    imgRef.value.style.transform = 'scale(' + scale + ')'
    // console.log(imgRef.value.style.transform)
  })
}
// scale()
</script>

<style scoped lang="scss">
.phone {
  text-align: center;
  width: 100%;
  background-color: #000;
}
p {
  font-size: 72px;
  background-color: #000;
  color: #fff;
  position: relative;
  z-index: 777;
}

.phone-bg {
  height: 675px;
  max-width: 1500px;
}
.phone-bg img {
  width: 100%;
  height: 100%;
  min-height: 672px;
  max-height: 748px;
  max-width: 1500px;
  background-color: transparent;
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}
</style>
